<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>匹配 - 招聘APP</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f9f9f9;
            height: 100vh;
        }
        .app-container {
            max-width: 390px;
            height: 100%;
            margin: 0 auto;
            background-color: white;
        }
        .card-container {
            position: relative;
            height: 520px;
            margin: 0 auto;
            perspective: 1000px;
        }
        .card {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            transition: transform 0.5s, opacity 0.5s;
            cursor: grab;
            background-color: white;
        }
        .card:active {
            cursor: grabbing;
        }
        .card-image {
            height: 60%;
            background-size: cover;
            background-position: center;
            position: relative;
        }
        .card-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 80px;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
        }
        .card-content {
            padding: 20px;
        }
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .card-name {
            font-size: 24px;
            font-weight: 600;
        }
        .card-age {
            font-size: 20px;
            color: #666;
        }
        .card-job {
            font-size: 16px;
            color: #666;
            margin-bottom: 10px;
        }
        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 15px;
        }
        .card-tag {
            padding: 6px 12px;
            background-color: #f0f7ff;
            color: #1677ff;
            border-radius: 20px;
            font-size: 12px;
        }
        .card-bio {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
        }
        .card-actions {
            display: flex;
            justify-content: space-around;
            padding: 20px 0;
        }
        .card-button {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
        }
        .card-button:active {
            transform: scale(0.95);
        }
        .card-button.dislike {
            background-color: white;
            color: #ff4d4f;
            border: 1px solid #ff4d4f;
        }
        .card-button.like {
            background-color: white;
            color: #1677ff;
            border: 1px solid #1677ff;
        }
        .card-button.super-like {
            background-color: white;
            color: #52c41a;
            border: 1px solid #52c41a;
        }
        .match-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s, visibility 0.3s;
        }
        .match-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .match-content {
            text-align: center;
            padding: 20px;
        }
        .match-title {
            font-size: 32px;
            font-weight: bold;
            color: white;
            margin-bottom: 20px;
        }
        .match-images {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }
        .match-image {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 3px solid white;
            object-fit: cover;
        }
        .match-message {
            color: white;
            margin-bottom: 30px;
        }
        .match-buttons {
            display: flex;
            gap: 15px;
        }
        .match-button {
            padding: 12px 25px;
            border-radius: 30px;
            font-weight: 500;
            cursor: pointer;
        }
        .match-button.message {
            background-color: #1677ff;
            color: white;
        }
        .match-button.continue {
            background-color: transparent;
            color: white;
            border: 1px solid white;
        }
        .bottom-nav {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: white;
            border-top: 1px solid #eee;
        }
        .bottom-nav a {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            text-decoration: none;
            font-size: 12px;
        }
        .bottom-nav a i {
            font-size: 20px;
            margin-bottom: 5px;
        }
        .bottom-nav a.active {
            color: #1677ff;
        }
        .swipe-indicator {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            padding: 10px 20px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 24px;
            z-index: 10;
            opacity: 0;
            transition: opacity 0.3s;
        }
        .swipe-indicator.like {
            right: 20px;
            color: #52c41a;
            border: 3px solid #52c41a;
        }
        .swipe-indicator.dislike {
            left: 20px;
            color: #ff4d4f;
            border: 3px solid #ff4d4f;
        }
        .card-info-button {
            position: absolute;
            bottom: 10px;
            right: 10px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1677ff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 5;
        }
        .card-location {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: white;
            font-size: 14px;
            display: flex;
            align-items: center;
            z-index: 5;
        }
        .card-location i {
            margin-right: 5px;
        }
        .empty-state {
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            text-align: center;
            display: none;
        }
        .empty-state img {
            width: 150px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="app-container relative" style="padding-bottom: 80px;">
        <div class="py-4 px-4">
            <div class="flex justify-between items-center mb-4">
                <h1 class="text-xl font-bold">探索</h1>
                <div class="flex items-center">
                    <button class="mr-2 p-2 bg-gray-100 rounded-full">
                        <i class="fas fa-sliders-h text-gray-600"></i>
                    </button>
                    <button class="p-2 bg-gray-100 rounded-full">
                        <i class="fas fa-bell text-gray-600"></i>
                    </button>
                </div>
            </div>
            
            <div class="card-container">
                <!-- 卡片1：人才卡片 -->
                <div class="card" id="card1" style="z-index: 3;">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&h=500&q=80');">
                        <div class="card-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>北京</span>
                        </div>
                        <button class="card-info-button" data-detail="talent">
                            <i class="fas fa-info"></i>
                        </button>
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <h2 class="card-name">张伟</h2>
                            <span class="card-age">28岁</span>
                        </div>
                        <p class="card-job">前端开发工程师 · 5年经验</p>
                        <div class="card-tags">
                            <span class="card-tag">React</span>
                            <span class="card-tag">Vue</span>
                            <span class="card-tag">TypeScript</span>
                            <span class="card-tag">Node.js</span>
                        </div>
                        <p class="card-bio">热爱前端开发，擅长React和Vue框架，对用户体验和性能优化有深入研究。曾参与多个大型电商和金融项目开发，寻找一个能够发挥技术特长的平台。</p>
                    </div>
                    
                    <div class="swipe-indicator like">喜欢</div>
                    <div class="swipe-indicator dislike">不感兴趣</div>
                </div>
                
                <!-- 卡片2：企业卡片 -->
                <div class="card" id="card2" style="z-index: 2;">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y29tcGFueXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&h=500&q=80');">
                        <div class="card-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>上海</span>
                        </div>
                        <button class="card-info-button" data-detail="company">
                            <i class="fas fa-info"></i>
                        </button>
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <h2 class="card-name">科技智联</h2>
                            <span class="card-age">B轮</span>
                        </div>
                        <p class="card-job">招聘: 高级前端工程师 · 15k-30k</p>
                        <div class="card-tags">
                            <span class="card-tag">React</span>
                            <span class="card-tag">微前端</span>
                            <span class="card-tag">低代码平台</span>
                        </div>
                        <p class="card-bio">我们是一家专注于企业数字化转型的科技公司，正在寻找有经验的前端工程师加入我们的团队。提供有竞争力的薪资、期权激励和舒适的工作环境。</p>
                    </div>
                    
                    <div class="swipe-indicator like">喜欢</div>
                    <div class="swipe-indicator dislike">不感兴趣</div>
                </div>
                
                <!-- 卡片3 -->
                <div class="card" id="card3" style="z-index: 1;">
                    <div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTR8fHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&h=500&q=80');">
                        <div class="card-location">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>深圳</span>
                        </div>
                        <button class="card-info-button">
                            <i class="fas fa-info"></i>
                        </button>
                    </div>
                    <div class="card-content">
                        <div class="card-header">
                            <h2 class="card-name">李梅</h2>
                            <span class="card-age">32岁</span>
                        </div>
                        <p class="card-job">产品经理 · 7年经验</p>
                        <div class="card-tags">
                            <span class="card-tag">B端产品</span>
                            <span class="card-tag">数据分析</span>
                            <span class="card-tag">用户研究</span>
                            <span class="card-tag">敏捷开发</span>
                        </div>
                        <p class="card-bio">资深产品经理，擅长B端产品设计和用户研究，曾主导多个千万级用户产品从0到1的全流程。寻找有挑战性的产品岗位，希望能够发挥自己的专业能力。</p>
                    </div>
                    
                    <div class="swipe-indicator like">喜欢</div>
                    <div class="swipe-indicator dislike">不感兴趣</div>
                </div>
            </div>
            
            <div class="card-actions">
                <button class="card-button dislike" id="dislike-btn">
                    <i class="fas fa-times"></i>
                </button>
                <button class="card-button super-like" id="super-like-btn">
                    <i class="fas fa-star"></i>
                </button>
                <button class="card-button like" id="like-btn">
                    <i class="fas fa-heart"></i>
                </button>
            </div>
            
            <!-- 空状态 -->
            <div class="empty-state" id="empty-state">
                <img src="https://images.unsplash.com/photo-1584824486509-112e4181ff6b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bm90JTIwZm91bmR8ZW58MHx8MHx8&auto=format&fit=crop&w=500&h=500&q=80" alt="没有更多卡片">
                <h2 class="text-xl font-bold mb-2">暂时没有更多推荐</h2>
                <p class="text-gray-500 mb-4">我们正在为您寻找更多匹配的人才/企业</p>
                <button class="bg-blue-500 text-white px-4 py-2 rounded-full">刷新</button>
            </div>
        </div>
        
        <!-- 底部导航栏（固定） -->
        <div class="bottom-nav" style="position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 390px;">
            <a href="#" class="active" id="nav-home">
                <i class="fas fa-home"></i>
                <span>首页</span>
            </a>
            <a href="chat-list.html" id="nav-messages">
                <i class="fas fa-comment"></i>
                <span>消息</span>
            </a>
            <a href="my.html" id="nav-me">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </a>
        </div>
        
        <!-- 匹配成功弹窗 -->
        <div class="match-overlay" id="match-overlay">
            <div class="match-content">
                <h2 class="match-title">匹配成功!</h2>
                <div class="match-images">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fHByb2ZpbGV8ZW58MHx8MHx8&auto=format&fit=crop&w=100&h=100&q=80" alt="用户头像" class="match-image">
                    <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y29tcGFueXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="匹配对象头像" class="match-image">
                </div>
                <p class="match-message">您与张伟互相喜欢，现在可以开始聊天了!</p>
                <div class="match-buttons">
                    <button class="match-button message" id="start-chat-btn">开始聊天</button>
                    <button class="match-button continue" id="continue-matching-btn">继续浏览</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 详情跳转
        document.querySelectorAll('.card-info-button').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const type = e.currentTarget.getAttribute('data-detail');
                if (type === 'talent') {
                    window.location.href = 'talent-detail.html';
                } else {
                    window.location.href = 'company-detail.html';
                }
            });
        });

        // 底部导航：根据角色跳转正确首页与消息
        (function(){
            const role = localStorage.getItem('role');
            const navHome = document.getElementById('nav-home');
            const navMessages = document.getElementById('nav-messages');
            if (role === 'company') {
                navHome.setAttribute('href', 'card-matching-company.html');
                navMessages.setAttribute('href', 'chat-list-company.html');
            } else {
                navHome.setAttribute('href', 'card-matching-talent.html');
                navMessages.setAttribute('href', 'chat-list-talent.html');
            }
        })();

        // 卡片滑动逻辑
        let currentCardIndex = 0;
        const cards = document.querySelectorAll('.card');
        const likeBtn = document.getElementById('like-btn');
        const dislikeBtn = document.getElementById('dislike-btn');
        const superLikeBtn = document.getElementById('super-like-btn');
        const matchOverlay = document.getElementById('match-overlay');
        const startChatBtn = document.getElementById('start-chat-btn');
        const continueMatchingBtn = document.getElementById('continue-matching-btn');
        const emptyState = document.getElementById('empty-state');
        
        let startX = 0;
        let currentX = 0;
        let isDragging = false;
        
        // 为每张卡片添加拖动事件
        cards.forEach(card => {
            card.addEventListener('mousedown', startDrag);
            card.addEventListener('touchstart', startDrag);
            card.addEventListener('mousemove', drag);
            card.addEventListener('touchmove', drag);
            card.addEventListener('mouseup', endDrag);
            card.addEventListener('touchend', endDrag);
            card.addEventListener('mouseleave', endDrag);
        });
        
        function startDrag(e) {
            isDragging = true;
            startX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
            this.style.transition = 'none';
        }
        
        function drag(e) {
            if (!isDragging) return;
            e.preventDefault();
            currentX = e.type.includes('mouse') ? e.clientX : e.touches[0].clientX;
            const diffX = currentX - startX;
            
            if (this === cards[currentCardIndex]) {
                this.style.transform = `translateX(${diffX}px) rotate(${diffX * 0.05}deg)`;
                
                // 显示喜欢/不喜欢指示器
                if (diffX > 80) {
                    this.querySelector('.swipe-indicator.like').style.opacity = '1';
                    this.querySelector('.swipe-indicator.dislike').style.opacity = '0';
                } else if (diffX < -80) {
                    this.querySelector('.swipe-indicator.like').style.opacity = '0';
                    this.querySelector('.swipe-indicator.dislike').style.opacity = '1';
                } else {
                    this.querySelector('.swipe-indicator.like').style.opacity = '0';
                    this.querySelector('.swipe-indicator.dislike').style.opacity = '0';
                }
            }
        }
        
        function endDrag(e) {
            if (!isDragging) return;
            isDragging = false;
            
            const card = cards[currentCardIndex];
            const diffX = currentX - startX;
            
            card.style.transition = 'transform 0.5s';
            
            if (diffX > 100) {
                // 向右滑动 - 喜欢
                likeCard();
            } else if (diffX < -100) {
                // 向左滑动 - 不喜欢
                dislikeCard();
            } else {
                // 恢复原位
                card.style.transform = '';
                card.querySelector('.swipe-indicator.like').style.opacity = '0';
                card.querySelector('.swipe-indicator.dislike').style.opacity = '0';
            }
        }
        
        // 按钮点击事件
        likeBtn.addEventListener('click', likeCard);
        dislikeBtn.addEventListener('click', dislikeCard);
        superLikeBtn.addEventListener('click', superLikeCard);
        
        function likeCard() {
            if (currentCardIndex >= cards.length) return;
            
            const card = cards[currentCardIndex];
            card.style.transform = 'translateX(150%) rotate(20deg)';
            
            // 随机触发匹配成功
            setTimeout(() => {
                if (Math.random() > 0.5) {
                    showMatchOverlay();
                }
                nextCard();
            }, 300);
        }
        
        function dislikeCard() {
            if (currentCardIndex >= cards.length) return;
            
            const card = cards[currentCardIndex];
            card.style.transform = 'translateX(-150%) rotate(-20deg)';
            
            setTimeout(() => {
                nextCard();
            }, 300);
        }
        
        function superLikeCard() {
            if (currentCardIndex >= cards.length) return;
            
            const card = cards[currentCardIndex];
            card.style.transform = 'translateY(-150%) scale(0.8)';
            
            // 超级喜欢更容易匹配成功
            setTimeout(() => {
                if (Math.random() > 0.2) {
                    showMatchOverlay();
                }
                nextCard();
            }, 300);
        }
        
        function nextCard() {
            currentCardIndex++;
            
            // 检查是否还有卡片
            if (currentCardIndex >= cards.length) {
                emptyState.style.display = 'flex';
            }
        }
        
        function showMatchOverlay() {
            matchOverlay.classList.add('active');
        }
        
        // 匹配成功后的按钮事件
        startChatBtn.addEventListener('click', () => {
            window.location.href = 'chat.html';
        });
        
        continueMatchingBtn.addEventListener('click', () => {
            matchOverlay.classList.remove('active');
        });
    </script>
</body>
</html> 